<template>
  <div>
    <span v-for="(item, index) in menuList" :key="index">
      <router-link :to="item.path">{{ item.name }}</router-link>
    </span>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      menuList: [
        {
          name: 'Swiper滑块',
          path: '/Swiper'
        }, {
          name: 'Element UI',
          path: '/Element',
        }, {
          name: '虚拟列表',
          path: '/VirtualList',
        }, {
          name: '图片编辑',
          path: '/SignImg',
        }, {
          name: 'Echart图表',
          path: '/Echart',
        }, {
          name: '自定义打印组件',
          path: '/Hiprint',
        }, {
          name: '自定义打印组件2.0',
          path: '/SvPrint',
        }, {
          name: '剪切板',
          path: '/ClipBoard',
        }, {
          name: '一二维码',
          path: '/BarQrCode',
        }, {
          name: '图文档管理',
          path: '/Office',
        },{
          name: '甘特图',
          path: '/DhtmlxGantt',
        },
        {
          name: 'Antv-X6',
          path: '/AntvX6',
        },
        {
          name: '拖拽课表',
          path: '/Drop',
        }
      ]
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
span {
  margin: 0 10px
}

a {
  color: #42b983;
}
</style>
